<template>
  <div class="mapscreen">
    <div id="container" v-loading="!maploaded" class="calcite-map calcite-map-absolute calcite-widgets-dark" element-loading-text="地图加载中。。。" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0,20,38, 1)" />

  </div>
</template>

<script>
import mapctx from '@/utils/map/mapctx.js'
import messagehandler from '@/utils/map/messagehandler.js'
import { setTheme } from '@/utils/util'
import Qs from 'qs'
export default {
  name: 'Map',
  components: {
  },
  data() {
    return {}
  },
  computed: {
    maploaded: {
      get() {
        return this.$store.state.setting.maploaded
      }
    }
  },
  async mounted() {
    const query = Qs.parse(location.hash.substring(3))
    const theme_resolution = query.themers === undefined ? 'theme-2k' : query.themers
    this.$store.commit('setting/setTheme_Resolution', theme_resolution)
    setTheme(this.$store.state.setting.theme_resolution)

    this.createMap()
  },
  beforeDestroy() {
  },
  methods: {
    async createMap() {
      this.$store.commit('setting/setMap_Loaded', false)
      this.initmap()
      // const params = {
      //   type: 'onemap',
      //   domainName: window.location.host
      // }
      // this.$get('microgistoken/gis/gtoken', { ...params }).then((r) => {
      //   const tokenobject = JSON.parse(r.data.msg)
      //   this.$store.commit('setting/setMapToken', tokenobject.token)
      //   this.initmap()
      // })
    },
    async initmap() {
      await mapctx.initmap()
      messagehandler.mapOperationMessage()
      messagehandler.mapReadyMessage()
    }
  }
}
</script>

<style scoped>
  #viewDiv{
     background-color: rgba(13, 26, 58, 1);
  }
  .map{
     background-color: rgba(13, 26, 58, 1);
  }
</style>
